<template>
  <el-card>
    <div>
      <el-row class="tips">
        <el-col>
          <el-alert :title="titleMsg" type="error"></el-alert>
        </el-col>
      </el-row>
      <!-- 1.0 查询 -->
      <search @searchData="getNewData" />

      <!-- 2.0 数据表格 -->
      <Table :dataarr="tableData" />

      <!-- 分页 -->
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>

    <!-- 添加黑名单 -->
    <el-dialog title="添加黑名单" :visible.sync="blackVisible" width="30%">
      <div>添加黑名单</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import Search from './components/Search.vue'
import Table from './components/Table.vue'
export default {
  components: {
    Search,
    Table
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 5,
      titleMsg:
        '黑名单管理 : 可将本平台或其他平台，做过或没做过任务的淘宝账号拉黑，被拉黑的淘宝号接不到相应店铺的任务。',
      searchObj: {
        beginDate: '',
        endDate: '',
        keyword: '',
        ptId: '',
        sellerPhone: '',
        storeId: null
      },
      tableData: [],
      total: 0,
      blackVisible: false
    }
  },
  created() {
    this.getTableData()
  },
  methods: {
    async getTableData() {
      const { data } = await this._axios.post(
        `/paishoublack/findpagebyparam?page=${this.pageNum}&size=${this.pageSize}`,
        this.searchObj
      )
      this.tableData = data.dataList
      this.total = data.totalCount
      // console.log(data)
    },
    handleSizeChange(n) {
      this.pageSize = n
      this.getTableData()
    },
    handleCurrentChange(n) {
      this.pageNum = n
      this.getTableData()
    },
    getNewData(o) {
      console.log(o)
      this.searchObj.ptId = o.countType
      this.searchObj.storeId = o.shopName
      this.searchObj.keyword = o.reason
      this.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-pagination {
  float: right;
  margin: 30px 0 50px;
  margin-right: 28px;
}
</style>
